<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./icon/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./mobile-select/mobile-select.css" />
    <link rel="stylesheet" href="./alibaba/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./less/css/renCar.css">
    <link rel="stylesheet" href="../Mint UI/style.css">
    <title>Document</title>
    <script src="./vue/js/vue.js"></script>
    <script src="./mobile-select/mobile-select.iife.min.js"></script>
    <script src="../Mint UI/index.js"></script>
</head>
<body>
  <div id="rentCar_box1"></div>
  <div id="rentCar_box2" class="tab-box">
      <ul class="tab-nav">
        <li @click="showActiveForTabTitClick"><span class="tab-tit" data-id="0" >国内租车</span></li>
        <li @click="showActiveForTabTitClick"><span class="tab-tit" data-id="1" >分时租</span></li>
        <li @click="showActiveForTabTitClick"><span class="tab-tit" data-id="2" >长租</span></li>
        <li @click="showActiveForTabTitClick"><span class="tab-tit" data-id="3" >国际租车</span></li>
      </ul>
      <div class="tab-content">
        <div id="active1" v-show="showActive.active1">
          <div id="a1_TT" class="tab-content active ">
            <div class="tac_divBox_1">
              <div class="select">
                <select>
                  <option>深圳</option>
                  <option>选项2</option>
                  <option>选项3</option>
                  <option>选项4</option>
                  <option>选项5</option>
                </select>
              </div>
              <div class="select_content">
                <div>深圳大厦自助点</div>
                <span>该门店仅支持自助取车</span>
              </div>
            </div>
            <div class="tac_divBox_2">
              <div class="select">
                <select>
                  <option>深圳</option>
                  <option>选项2</option>
                  <option>选项3</option>
                  <option>选项4</option>
                  <option>选项5</option>
                </select>
              </div>
              <div class="select_content_2">
                <div class="tt">
                  <div class="szdx">深圳大厦自助点</div> 
                  <div class="smdd">
                    <div class="smdd_tt">
                      <input type="radio" id="shangmen" name="whe" checked="true"/>
                      <label for="shangmen">上门</label>
                    </div>
                    <div class="smdd_tt">
                      <input type="radio" id="daodian" name="whe"/>
                      <label for="daodian">到店</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tac_divBox_3">
              <div class="tac_div3_left">
                <span class="td3l_span_top">
                  <div @click="showPopup">{{prevDay}}</div>
                  <mt-popup
                  v-model="popupVisible"
                  position="bottom"
                  :close-on-click-modal="true"
                  >
                      <mt-picker :slots="slots" @change="onValuesChange" style="width: 200vw;font-size: 2vw;"></mt-picker>
                  </mt-popup>
                </span>
                <span class="td3l_span_bottom">{{prevTime}}</span>
              </div>
              <div class="tac_div3_center">
                <span class="text-center td3c_span_top">{{daysApart}}</span>
                <span class="td3c_span_bottom">
                  <div class="divtest"></div>
                </span>
              </div>
              <div class="tac_div3_left">
                <span class="td3l_span_top">
                  <div @click="showPopup1">{{nextDay}}</div>
                  <mt-popup
                  v-model="popupVisible1"
                  position="bottom"
                  >
                      <mt-picker :slots="slots1" @change="onValuesChange1" style="width: 200vw;font-size: 2vw;"></mt-picker>
                  </mt-popup>
                </span>
                <span class="td3l_span_bottom">{{nextTime}}</span>
              </div>
            </div>
            <div class="tac_divBox_4">
              <div class="tacd4_ct" @click="selectNow">
                立即选车
              </div>
            </div>
          </div>
          <div class="tab_bot">
            <div class="tab_bot_div">
              <div class="tbd_sfCar" >
                <div class="sfCar">顺风车推荐</div>
                <div class="sfCar_content">
                  查看全部
                  <span class="icon iconfont icon-fangxiang-you"></span>
                </div>
              </div>
              <div class="tbd_rel">
                <img rel="prefetch" src="images/car3_03.png"/>
                <div class="tbd_rel_ab1">
                  <div>深圳</div>
                  <span>2019-08-10</span>
                </div>
                <div class="tbd_rel_ab2">
                  <span>——</span>
                  <span class="icon iconfont icon-fangxiang-you"></span>
                </div>
                <div class="tbd_rel_ab3">
                  <div>深圳</div>
                  <span>2019-08-10</span>
                </div>
                <span class="tbd_rel_ab4">A车/5座/2.0T</span>
                <span class="tbd_rel_ab5">￥ <span>100</span></span>
              </div>
              <div class="tbd_rel">
                <img rel="prefetch" src="images/car3_03.png" />
                <div class="tbd_rel_ab1">
                  <div>深圳</div>
                  <span>2019-08-10</span>
                </div>
                <div class="tbd_rel_ab2">
                  <span>——</span>
                  <span class="icon iconfont icon-fangxiang-you"></span>
                </div>
                <div class="tbd_rel_ab3">
                  <div>深圳</div>
                  <span>2019-08-10</span>
                </div>
                <span class="tbd_rel_ab4">A车/5座/2.0T</span>
                <span class="tbd_rel_ab5">￥ <span>100</span></span>
              </div>
            </div>
          </div>
        </div>
        <div id="active2" v-show="showActive.active2">
          <div class="tab-content active" style="border: 1px solid red;">
            内容2
          </div>
        </div>
        <div id="active3" v-show="showActive.active3">
          <div class="tab-content active" style="border: 1px solid red;height: 100vw;">
            内容3
          </div>
        </div>
        <div id="active4" v-show="showActive.active4">
          <div class="tab-content active" style="border: 1px solid red;">
            内容4
          </div>
        </div>
      </div>
  </div>

  <div id="index_box9">
    <div class="index_box9_content">
        <div class="box text-center">
            <span class="icon iconfont icon-shouye"></span>
            <div class="text-center" @click="jump('首页')">首页</div>
        </div>
        <div class="box text-center">
            <span class="icon iconfont icon-maiche"></span>
            <div class="text-center" @click="jump('买车')">买车</div>
        </div>
        <div class="box text-center" style="color: #249FF4;">
            <span class="icon iconfont icon-zuche"></span>
            <div class="text-center" @click="jump('租车')">租车</div>
        </div>
        <div class="box text-center">
            <span class="icon iconfont icon-iconfontzhizuobiaozhun023121"></span>
            <div class="text-center" @click="jump('卖车')">卖车</div>
        </div>
        <div class="box text-center">
            <span class="icon iconfont icon-geren"></span>
            <div class="text-center" @click="jump('我的')">我的</div>
        </div>
    </div>
  </div>
  
  <script src="./js/rentCar.js" ></script>
  <script type="text/javascript">
    
    //#region active1 交互功能
    new Vue({
      el:'#rentCar_box2',
      data(){
        return{
          prevDay:'请选择',
          prevTime:'',
          nextDay:'请选择',
          nextTime:'',
          popupVisible:false,
          isChangeDateTime:{
            change1:true,
            change2:true,
            change3:true
          },
          isChangeDateTime1:{
            change1:true,
            change2:true,
            change3:true
          },
          showActive:{
            active1:true,
            active2:false,
            active3:false,
            active4:false
          },
          slots:[
            {
              flex: 1,
              values: [],
              textAlign: 'right'
            },
            {
              divider: true,
              content: '-',
              className: 'slot2'
            }, 
            {
              flex: 1,
              values: [],
              className: 'slot3',
              textAlign: 'left'
            }
          ],
          popupVisible1:false,
          slots1:[
            {
              flex: 1,
              values: [],
              textAlign: 'right'
            },
            {
              divider: true,
              content: '-',
              className: 'slot2'
            }, 
            {
              flex: 1,
              values: [],
              className: 'slot3',
              textAlign: 'left'
            }
          ],
          daysApart:''
        }
      },
      methods:{
        //#region 日期事件选择器和按钮的点击事件的显示
        showPopup () {
            this.popupVisible = true
        },
        showPopup1(){
            this.popupVisible1 = true
        },
        onValuesChange(picker, values) {
          // 判断是不是第一次触发
          if(this.isChangeDateTime.change1){
            this.isChangeDateTime.change1=false
            // console.log('第一次触发')
          }else{
            // 判断是否是第二次触发
            if(this.isChangeDateTime.change2){
              this.isChangeDateTime.change2=false
              // console.log('第二次触发')
            }else{
              // 判断是否是三次触发
              // if(this.isChangeDateTime.change3){
              //   this.isChangeDateTime.change3=false
              // }else{
                this.prevDay = values[0]
                this.prevTime = values[1]
                // console.log('onValuesChange',this.prevDay,this.prevTime)
              // }
              
            }
          }
        },
        onValuesChange1(picker, values) {
          // 判断是不是第一次触发
          if(this.isChangeDateTime1.change1){
            this.isChangeDateTime1.change1=false
            // console.log('第一次触发')
          }else{
            // 判断是否是第二次触发
            if(this.isChangeDateTime1.change2){
              this.isChangeDateTime1.change2=false
              // console.log('第二次触发')
            }else{
              // 判断是否是三次触发
              if(this.isChangeDateTime1.change3){
                this.isChangeDateTime1.change3=false
              }else{
                this.nextDay = values[0]
                this.nextTime = values[1]
                // console.log('onValuesChange1',this.nextDay,this.nextTime)
              }
              
            }
          }
        },
        //#endregion

        //#region 点击 国内租车 分时租 长租 国际租车 显示不同的模块
        showActiveForTabTitClick(){
          // console.log(event.currentTarget.firstElementChild.dataset.id)
          let index = event.currentTarget.firstElementChild.dataset.id
          if(index==0){
            this.showActive.active1 = true
            this.showActive.active2 = !true
            this.showActive.active3 = !true
            this.showActive.active4 = !true
          }else if(index==1){
            this.showActive.active1 = !true
            this.showActive.active2 = true
            this.showActive.active3 = !true
            this.showActive.active4 = !true
          }else if(index==2){
            this.showActive.active1 = !true
            this.showActive.active2 = !true
            this.showActive.active3 = true
            this.showActive.active4 = !true
          }else if(index==3){
            this.showActive.active1 = !true
            this.showActive.active2 = !true
            this.showActive.active3 = !true
            this.showActive.active4 = true
          }else{
            this.showActive.active1 = true
            this.showActive.active2 = !true
            this.showActive.active3 = !true
            this.showActive.active4 = !true
          }
        },
        //#endregion

        //#region 立即选车按钮点击事件
        selectNow(){
          // this.$toast('Hello world!')
          window.location.href='./details.html'
        },
        //#endregion

      },
      watch:{
        //#region  监听popupVisible1的值，判断是否已经选择最后的时间
        popupVisible1(prev,next){
          console.log('popupVisible发生了改变',prev,next)
          if(!prev){
            if(next){
              if(this.prevDay=="请选择"||this.nextDay=="请选择"){
                this.$toast('请选择租车日期时间')
              }else{
                let startTime = new Date(this.prevDay+' '+this.prevTime+':00')
                let endTime = new Date(this.nextDay+' '+this.nextTime+':00')
                // console.log(this.prevDay+' '+this.prevTime+':00')
                // console.log(this.nextDay+' '+this.nextTime+':00')
                // 计算开始时间和结束时间之间的毫秒数差值
                let diff = endTime.getTime() - startTime.getTime();
                // 将毫秒数差值转换为分钟
                let minutes = Math.floor(diff / 1000 / 60);
                if(minutes<60){
                  this.$toast('租借时间不能少于60分钟')
                  this.nextDay='请选择'
                  this.nextTime=''
                }else{
                  console.log('两个时间之间相差了' + minutes + '分钟');
                  let days = Math.floor(minutes / (60*24));
                  let hours = Math.floor((minutes % (60*24))/60)
                  let mins = minutes % 60
                  if(days>0){
                    this.daysApart = days+'d/'+hours+'h/'+mins+'m'
                  }else if(days==0&&hours>0){
                    this.daysApart = hours+'h/'+mins+'m'
                  }else if(days==0&&hours==0){
                    this.daysApart = mins+'m'
                  }else{
                    this.daysApart = days+'d/'+hours+'h/'+mins+'m'
                  }
                }
              }
            }
          }
        }
      },
      mounted(){
        for (let i = 1; i < 8; i++) {
            let now = new Date();
            let date = new Date(now.setDate(now.getDate() + i));
            let year = date.getFullYear(); // 年
            let month = date.getMonth() + 1; // 月
            let day = date.getDate(); // 日
            let text = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
            // console.log(text)
            this.slots[0].values.push(text)
            this.slots1[0].values.push(text)
        }
        // this.prevDay = this.slots[0].values[0];
        // this.nextDay = this.slots[0].values[1];
        // 生成时间带前导零，例如：00:00, 00:30, 01:00, ..., 23:30
        for (let i = 0; i < 24; i++) {
          for (let j = 0; j < 60; j += 30) {
            let hourStr = i.toString().padStart(2, '0');
            let minuteStr = j.toString().padStart(2, '0');
            this.slots[2].values.push(`${hourStr}:${minuteStr}`)
            this.slots1[2].values.push(`${hourStr}:${minuteStr}`)
          }
        }
        // this.prevTime = this.slots[2].values[16]
        // this.nextTime = this.slots[2].values[16]
      },
    })
    //#endregion 

    //#region index_box9交互功能
    new Vue({
        el:"#index_box9",
        methods:{
            jump(context){
                console.log(context)
                if(context==='首页'){
                    window.location.href='./index.html'
                }else if(context==='买车'){
                    window.location.href='./buyCar.html'
                }else if(context==='租车'){
                    window.location.href='./rentCar.html'
                }else if(context==='卖车'){
                    window.location.href='./SellCar.html'
                }else if(context==='我的'){
                    window.location.href='./PersonalCenter.html'
                }
            }
        }
    })
    //#endregion
    
  </script>
</body>
</html>